<script setup>
import { onMounted, ref, reactive } from 'vue'
import bread from '@/components/bread/bread.vue'

const mapRef = ref()
onMounted(() => {
  var map = new BMapGL.Map(mapRef.value);          // 创建地图实例
  var point = new BMapGL.Point(118.021486,36.834882);  // 创建点坐标
  var marker = new BMapGL.Marker(point);        // 创建标注
  var content = "淄博市技能人才开发协会(联通路147号农广大厦)";
  var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,                          // 设置标注的地理位置
    offset: new BMapGL.Size(-10, -90)           // 设置标注的偏移量
  })
  label.setStyle({

    borderRadius: '5px',
    borderColor: '#ccc',
    padding: '10px',
    fontSize: '16px',
    height: '30px',
    lineHeight: '30px',
    fontFamily: '微软雅黑'
  });
  map.addOverlay(label);
  map.addOverlay(marker);                     // 将标注添加到地图中
  map.centerAndZoom(point, 20);
})
const breadcround = ref([
  { name: '首页', url: '/main/home' },
  { name: '联系我们', url: '/main/Contactus' }
])
</script>

<template>
  <div>
    <div class="nav">
      <img src="@/assets/img/contactImg.png" alt="">
    </div>
    <div class="main">
      <div class="bread">
        <bread class="bread" :breadcround="breadcround" />
      </div>
      <div class="Detailed">
        <div class="address">
          <div class="icon"><img src="@/assets/img/addressIcon.png" alt=""></div>
          <div class="title">协会地址</div>
          <div class="context">山东省淄博市张店区联通路147号</div>
        </div>
        <div class="partition"></div>
        <div class="address">
          <div class="icon"><img src="@/assets/img/phoneIcon.png" alt=""></div>
          <div class="title">手机号码</div>
          <div class="context">
            17853339199
            <br> 工作日：8:00 - 20：00
          </div>
        </div>
        <div class="partition"></div>

        <div class="address">
          <div class="icon"><img src="@/assets/img/telIcon.png" alt=""></div>
          <div class="title">联系电话</div>
          <div class="context">0533-2729818 <br>
            服务热线 7x24小时服务</div>
        </div>
      </div>
      <div class="map" ref="mapRef">
      </div>
      <div class="attention">扫码关注我们</div>
      <div class="imgs">
        <div class="wx-img">
          <img src="@/assets/img/kf-wechat.jpg" alt="">
          <span>淄博市技能人才开发协会公众号</span>
        </div>
        <div class="wx-img">
          <img src="@/assets/img/wechat.jpg" alt="">
          <span>淄博市技能人才开发协会公众号</span>
        </div>
      </div>
    </div>

  </div>
</template>

<style lang="less" scoped>
.nav {
  height: 280px;
}

.main {
  width: 1500px;
  margin: 0 auto;

  .bread {
    margin-top: 25px;
  }

  .Detailed {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px 0;

    .partition {
      width: 1px;
      height: 100px;
      background: #CACACC;
    }

    .address {
      width: 500px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .icon {
        width: 72px;
        height: 68px;

        margin: 0 auto 30px;

        img {
          object-fit: contain;
        }
      }

      .title {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        // line-height: 18px;
        margin-bottom: 17px;
      }

      .context {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #787878;
        line-height: 30px;
      }
    }
  }

  .map {
    width: 100%;
    margin: 0 auto;
    height: 480px;
  }

  .attention {
    text-align: center;
    font-size: 36px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #1A1A1A;
    margin: 47px 0;
  }

  .imgs {
    display: flex;

    justify-content: space-evenly;

    .wx-img {
      width: 322px;
      height: 322px;
      border: 1px solid #DEDFE0;
      text-align: center;

      span {
        display: inline-block;
        margin-top: 20px;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
